<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>小米账号 - 登录</title>
		<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico"/>
		<link rel="stylesheet" type="text/css" href="css/login.css"/>
	</head>
	<body>
		<div class="wrapper">
			<!--bg_banner_start-->
			<div class="loginbanner">
				<div class="h_pannel"></div>
				<div class="login_banner"></div>
			</div>
			<!--bg_banner_end-->
			<div class="layout_pannel">
				<div class="layout">
					<div class="login_main">
						<div class="nav_tabs">
							<a class="active" href="javascript:void(0);">帐号登录</a>
							<span class="line"></span>
							<a href="javascript:void(0);">扫码登录</a>
						</div>
						<!--账户登录-->
						<div class="tabs_con tabs-active">
							<div class="login_area">
								<form action="" method="post">
									<label class="labelbox first">
										<input type="text" id="username" value="" placeholder="邮箱/手机号码/小米帐号" />
									</label>
									<label class="labelbox">
										<input type="password" id="password" value="" placeholder="密码" />
									</label>
									<div class="btns_bg">
										<input class="btnSubmit" type="submit" name="" id="login-button" onclick="tz(this)" value="立即登录" />
									</div>
									<div class="login_type">
										<fieldset class="oth_type_tit">
											<legend class="oth_type">其他方式登录</legend>
										</fieldset>
										<div class="oth_type_link">
											<a class="icon_type btn_qq" href=""><i class="btn_icontype icon_qq"></i></a>
											<a class="icon_type btn_weibo" href=""><i class="btn_icontype icon_weibo"></i></a>
											<a class="icon_type btn_alipay" href=""><i class="btn_icontype icon_alipay"></i></a>
											<a class="icon_type btn_weixin" href=""><i class="btn_icontype icon_weixin"></i></a>
										</div>
									</div>
								</form>
							</div>
							<!--忘记密码-->
							<div class="links_area">
								<a class="out_link" href="">注册小米帐号</a>
								<span>|</span>
								<a class="out_link" href="">忘记密码？</a>
							</div>
						</div>
						<!--扫码登录-->
						<div class="tabs_code">
							<div class="code_iframe"><img src="img/login/erweima.png"/></div>
							<div class="custom_sub_text">
								<p>使用<span>小米商城APP</span>扫一扫</p>
								<p>请打开「设置 > 小米帐号 > 右上角扫一扫」扫码登录</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<footer>
			<ul class="lang-select-list">
				<li>
					<a class="current" href="">简体</a><span>|</span>
				</li>
				<li>
					<a href="">繁体</a><span>|</span>
				</li>
				<li>
					<a href="">English</a><span>|</span>
				</li>
				<li>
					<a href="">常见问题</a>
				</li>
			</ul>
			<p class="intro">
				小米公司版权所有-京ICP备10046444-
				<a href=""><img src="img/login/ghs.png"/>京公网安备11010802020134号</a>-京ICP证110507号
			</p>
		</footer>
	</body>
	<script type="text/javascript">
		var tabs = document.querySelectorAll(".nav_tabs a"),
		    tabs_con = document.querySelector(".tabs_con"),
		    tabs_code = document.querySelector(".tabs_code");
		    
		tabs[0].onclick = function(){
			tabs[0].classList.add("active");
			tabs[1].classList.remove("active");
			tabs_con.classList.add("tabs-active");
			tabs_code.classList.remove("tabs-active");
		}
		tabs[1].onclick = function(){
			tabs[0].classList.remove("active");
			tabs[1].classList.add("active");
			tabs_con.classList.remove("tabs-active");
			tabs_code.classList.add("tabs-active");
		}
		
		function tz(obj){
			location.href = 'personal.html';
		}
	</script>
</html>
